<template>
    <div class="common-layout">
      <el-container>
        <!-- 左侧菜单 -->
        <div class="side">
          <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            :collapse="isCollapse">
            <div class="sidebar-logo-container" @click="handleLogout">
              <!-- <router-link class="sidebar-logo-link"> -->
              <img v-if="logo" :src="logo" class="sidebar-logo" />
              <h1 class="sidebar-title">{{ title }}</h1>
              <!-- </router-link> -->
  
            </div>
            
            <el-menu-item index="1">
              <router-link to="/adminIndex/user">
      <el-icon style="color:rgb(191, 203, 217);"><UserFilled /></el-icon>
      <span>用户管理</span>
    </router-link>
    </el-menu-item>
    
            <el-menu-item index="2">
              <router-link to="/adminIndex/totalWork">
      <el-icon style="color:rgb(191, 203, 217);"><InfoFilled /></el-icon>
      <span>总工作量</span>
    </router-link>
    </el-menu-item>
  
    <el-menu-item index="3">
      <router-link to="/adminIndex/researchProject">
      <el-icon style="color:rgb(191, 203, 217);"><GoodsFilled /></el-icon>
      <span>科研项目工作量</span></router-link>
    </el-menu-item>
  
            <el-menu-item index="4">
              <router-link to="/adminIndex/academicWorks">
                <el-icon style="color:rgb(191, 203, 217);">
                  <List />
                </el-icon>
                <!-- <i class="el-icon-setting"></i> -->
                <span>学术著作</span>
             </router-link>
            </el-menu-item>
  
            <el-menu-item index="5">
              <router-link to="/adminIndex/decisionConsulting">
                <el-icon style="color:rgb(191, 203, 217);">
                  <LocationFilled />
                </el-icon>
                <!-- <i class="el-icon-setting"></i> -->
                <span>决策咨询类</span>
            </router-link>
            </el-menu-item>
  
            <el-menu-item index="6">
              <router-link to="/adminIndex/creativeAchievement">
                <el-icon style="color:rgb(191, 203, 217);">
                  <LocationFilled />
                </el-icon>
                <!-- <i class="el-icon-setting"></i> -->
                <span>创作成果类</span>
              </router-link>
            </el-menu-item>
  
            <el-menu-item index="7">
              <router-link to="/adminIndex/intellectualProperty">
                <el-icon style="color:rgb(191, 203, 217);">
                  <LocationFilled />
                </el-icon>
                <!-- <i class="el-icon-setting"></i> -->
                <span>知识产权类</span>
              </router-link>
            </el-menu-item>
  
            <el-menu-item index="8">
              <router-link to="/adminIndex/user">
                <el-icon style="color:rgb(191, 203, 217);">
                  <LocationFilled />
                </el-icon>
                <!-- <i class="el-icon-setting"></i> -->
                <span>成果转化类</span>
             </router-link>
            </el-menu-item>
  
            <el-sub-menu index="9">
    <template #title>
      <el-icon style="color:rgb(191, 203, 217);">
        <LocationFilled />
      </el-icon>
      <span>科研奖项</span>
    </template>
    <!-- 子菜单项 -->
    <el-menu-item index="8-1">
      <router-link class="nav-link" to="/adminIndex/delivery/natural-science">
        <span>自然科学</span>
      </router-link>
    </el-menu-item>
    <el-menu-item index="8-2">
      <router-link class="nav-link" to="/adminIndex/delivery/humanities-social-science">
        <span>人文社科</span>
      </router-link>
    </el-menu-item>
  </el-sub-menu>
  
            <el-menu-item index="10">
              <router-link to="/adminIndex/user">
                <el-icon style="color:rgb(191, 203, 217);">
                  <LocationFilled />
                </el-icon>
                <!-- <i class="el-icon-setting"></i> -->
                <span>网络文化成果</span>
           </router-link>
            </el-menu-item>
  
            <el-menu-item index="11">
              <router-link to="/adminIndex/user">
                <el-icon style="color:rgb(191, 203, 217);">
                  <LocationFilled />
                </el-icon>
                <!-- <i class="el-icon-setting"></i> -->
                <span>学术论文</span>
              </router-link>
            </el-menu-item>
  
            <el-menu-item index="12">
              <router-link to="/adminIndex/user">
                <el-icon style="color:rgb(191, 203, 217);">
                  <LocationFilled />
                </el-icon>
                <!-- <i class="el-icon-setting"></i> -->
                <span>科技活动</span>
             </router-link>
            </el-menu-item>
  
            <el-menu-item index="13">
              <router-link to="/adminIndex/user">
                <el-icon style="color:rgb(191, 203, 217);">
                  <LocationFilled />
                </el-icon>
                <!-- <i class="el-icon-setting"></i> -->
                <span>重要平台</span>
              </router-link>
            </el-menu-item>
  
          </el-menu>
        </div>
        <el-container>
  
          <!-- 顶部导航栏 -->
          <el-header class="navbar">
            <el-button type="text" class="toggle-button" @click="toggleCollapse">
              <el-icon>
                <Fold />
              </el-icon>
            </el-button>
            <Breadcrumb :history="history" />
  
            <!-- 新增的下拉菜单 -->
            <div class="user-dropdown">
              <el-dropdown>
                <span class="el-dropdown-link">
  <!-- 显示用户名 -->
                <p>您好，{{ user.username }}</p>
  <!--                <img src="@/assets/images/outTop.jpg" alt="User" style="width: 36px;height: 36px;border-radius: 50%;">-->
                  <el-icon class="el-icon--right">
                    <ArrowDown />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </el-header>
  
          <!-- 标签页 -->
          <el-tabs v-model="editableTabsValue" type="card" @tab-remove="removeTab" @tab-click="handleTabClick">
            <el-tab-pane v-for="item in history" :key="item.path" :label="item.title" :name="item.path"
              :closable="item.path !== '/'" :class="{ 'is-active': item.path === editableTabsValue }">
            </el-tab-pane>
          </el-tabs>
  
          <el-main>
            <router-view></router-view>
          </el-main>
  
        </el-container>
      </el-container>
    </div>
  </template>
  
  <script setup>
  import logo from '@/assets/logo/logo.png'
  import { ref, watch,reactive, onMounted } from 'vue';
  import { Fold, ArrowDown } from '@element-plus/icons-vue';
  import { useRoute, useRouter } from 'vue-router';
  import { logout } from '@/api/auth';
  import { cartListUser } from '@/api/user';
  import { ElMessage, ElMessageBox } from 'element-plus';
  
  const isCollapse = ref(false);
  const router = useRouter();
  const route = useRoute();
  // 定义折叠/展开菜单的方法
  function toggleCollapse() {
    console.log('Toggling collapse state:', !isCollapse.value); // 添加日志检查状态切换
    isCollapse.value = !isCollapse.value;
  }
  // 初始化标题
  const title = ref('科研服务管理平台');
  const editableTabsValue = ref('/');
  const history = ref([{ title: '首页', path: '/adminIndex/user' }]);
  
  // 定义用户信息对象
  const user = reactive({
    username: '未知用户'
  });
  
  // 监听路由变化并更新历史
  watch(route, (to) => {
    // 如果是首次加载或路由改变，则添加新标签页
    if (!history.value.find(item => item.path === to.path)) {
      addTab(to.path);
    } else {
      // 如果已经存在则直接激活
      editableTabsValue.value = to.path;
    }
  }, { immediate: true });
  
  // 添加标签页的方法
  function addTab(path) {
    const tab = { title: route.matched.find(record => record.path === path)?.meta?.title || '未知', path };
    if (!history.value.find(item => item.path === tab.path)) {
      history.value.push(tab);
    }
    editableTabsValue.value = tab.path;
    router.push(tab.path);
  }
  
  // 移除标签页的方法
  function removeTab(targetName) {
    let tabs = history.value;
    let activeName = editableTabsValue.value;
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.path === targetName) {
          let nextTab = tabs[index + 1] || tabs[index - 1];
          if (nextTab) {
            activeName = nextTab.path;
          }
        }
      });
    }
  
    editableTabsValue.value = activeName;
    history.value = tabs.filter(tab => tab.path !== targetName);
    router.push(activeName);
  }
  // 切换标签页的方法
  function handleTabClick(tab) {
    router.push(tab.props.name);
  }
  
  // 获取当前登录用户信息
  const fetchCurrentUser = async () => {
    try {
      const response = await cartListUser(); // 调用正确的 API 方法
  //     console.log('response=',response)
  //     const data = response.data;
  // console.log('zhengzai=',response.data)
      // 更新用户信息
      user.username = response.username || '未知用户';
      // console.log('username=',response.username)
    } catch (error) {
      console.error('Failed to fetch user info:', error);
    }
  };
  
  // 处理登出逻辑的方法
  async function handleLogout() {
    try {
      await logout(); // 调用logout方法
      ElMessage.success('退出登录成功'); // 显示成功信息
      router.push('/login'); // 重定向到登录页面
    } catch (error) {
      ElMessage.error('登出失败，请稍后再试'); // 显示错误信息
      console.error('Logout failed:', error);
    }
  }
  
  // 页面加载时调用
  onMounted(() => {
    fetchCurrentUser();
  });
  </script>
  
  <style lang="scss" scoped>
  //  @import '../assets/css/app.css';
  @import '../assets/css/chunkcss.css';
  
  .el-menu-vertical-demo {
    height: 1000px;
  }
  
  .example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  }
  
  .toggle-button {
    position: absolute;
    top: 9px;
    left: 4px;
    color: #1c2127;
    width: 36px;
    /* 设置宽度 */
    height: 36px;
    /* 设置高度 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* 移除默认填充 */
  }
  
  /* 确保图标也适应按钮的新尺寸 */
  .toggle-button .el-icon {
    font-size: 18px;
    /* 根据需要调整 */
  
  }
  
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
  
  .sidebarLogoFade-enter-active {
    transition: opacity 1.5s;
  }
  
  .sidebarLogoFade-enter,
  .sidebarLogoFade-leave-to {
    opacity: 0;
  }
  
  
  
  .sidebar-logo-container {
    position: relative;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: rgb(48, 65, 86) !important;
    // background: #2b2f3a;
    text-align: center;
    overflow: hidden;
  
  
    .sidebar-title {
      display: inline-block;
      margin: 0;
      color: #fff !important;
      font-weight: 600;
      line-height: 50px;
      font-size: 14px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      vertical-align: middle;
    }
  
    .sidebar-logo {
      width: 32px;
      height: 32px;
      vertical-align: middle;
      margin-right: 12px;
    }
  
  
    .collapse {
      .sidebar-logo {
        margin-right: 0px;
      }
    }
  }
  
  .el-scrollbar {
    background-color: rgb(48, 65, 86) !important;
  }
  
  .el-menu {
    background-color: rgb(48, 65, 86);
  }
  
  .el-menu-item {
    color: #fff;
  }
  
  .sidebar-logo-container .sidebar-logo-link .sidebar-logo {
    margin-right: 0px;
  }
  
  .navbar {
    height: 50px;
    overflow: visible;
    /* 确保下拉菜单可以超出此元素 */
    position: relative;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .user-dropdown {
    margin-right: 16px;
    position: relative;
    /* 确保相对定位 */
    z-index: 1000;
    /* 提高z-index以确保下拉菜单可以在最上层 */
  }
  
  /* 增加下拉菜单的 z-index 并确保其不会受到任何父元素的影响 */
  :deep(.el-dropdown-menu) {
    z-index: 1001 !important;
    /* 确保下拉菜单总是在最顶层 */
    position: absolute !important;
    /* 强制绝对定位 */
  }
  
  /* 防止其他全局样式影响 */
  :deep(.el-popper) {
    z-index: 1001 !important;
    /* 确保 popper 容器也在最顶层 */
  }
  
  .el-dropdown-link img {
    vertical-align: middle;
  }
  
  .el-dropdown-link {
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  
  .el-breadcrumb {
    margin-left: 30px;
    margin-top: 5px;
  }
  
  .el-main {
    margin-top: -36px;
  }
  
  /* 标签页的基本样式 */
  :deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 26px;
    line-height: 26px;
    border: 1px solid #d8dce5;
    color: #495060;
    background: #fff;
    padding: 0 8px;
    font-size: 12px;
    margin-left: 5px;
    margin-top: 4px;
  }
  
  /* 激活标签页样式 */
  :deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
    background-color: rgb(64, 158, 255) !important;
    /* 蓝色背景 */
    color: #fff !important;
    /* 白色文字 */
    border-color: rgb(64, 158, 255);
    /* 蓝色边框 */
    width: 110px;
  
    /* 添加白色小圆点 */
    &::before {
      content: '';
      /* 空内容 */
      display: inline-block;
      width: 6px;
      /* 圆点直径 */
      height: 6px;
      /* 圆点直径 */
      background-color: #fff;
      /* 白色 */
      border-radius: 50%;
      /* 圆形 */
      margin-right: 4px;
      /* 与文字间距 */
      vertical-align: middle;
      /* 垂直居中 */
    }
  }
  
  /* 移除默认激活边框 */
  :deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
    border-bottom-color: rgb(64, 158, 255);
  }
  
  /* 确保非激活状态下的标签页有默认样式 */
  :deep(.el-tabs--card > .el-tabs__header .el-tabs__item) {
    color: black;
    /* 默认黑色文字 */
  }
  
  .sidebar-logo-container .sidebar-logo[data-v-14eadf82] {
    width: 40px;
    margin-right: 0px;
  }
  
  /* 父菜单标题样式 */
  :deep(.el-sub-menu__title) {
    color: #fff !important; /* 字体颜色为白色 */
    background-color: rgb(48, 65, 86) !important; /* 默认背景颜色 */
    padding-left: 20px !important; /* 左侧内边距 */
    height: 50px; /* 高度 */
    line-height: 50px; /* 行高 */
    display: flex;
    align-items: center; /* 图标和文字垂直居中对齐 */
  
    /* 图标和文字间距 */
    // .el-icon {
    //   margin-right: 10px;
    // }
  }
  
  /* 父菜单标题鼠标悬停时的背景颜色 */
  :deep(.el-sub-menu__title:hover) {
    background-color: #313e51 !important; /* 悬停时背景颜色 */
  }
  
  /* 子菜单项样式 */
  :deep(.el-sub-menu .el-menu-item) {
    color: #fff !important; /* 字体颜色为白色 */
    background-color: rgb(48, 65, 86) !important; /* 背景颜色 */
    padding-left: 40px !important; /* 增加缩进，区分层级 */
    height: 50px; /* 高度 */
    line-height: 50px; /* 行高 */
  }
  
  /* 子菜单项鼠标悬停时的背景颜色 */
  :deep(.el-sub-menu .el-menu-item:hover) {
    background-color: #313e51 !important; /* 悬停时背景颜色 */
  }
  
  /* 弹出层背景颜色 */
  :deep(.el-menu--popup) {
    background-color: rgb(48, 65, 86) !important; /* 弹出层背景颜色 */
    border: none !important; /* 去掉边框 */
  }
  
  /* 弹出层中的子菜单项样式 */
  :deep(.el-menu--popup .el-menu-item) {
    color: #fff !important; /* 字体颜色为白色 */
    background-color: rgb(48, 65, 86) !important; /* 背景颜色 */
    padding-left: 20px !important; /* 左侧内边距 */
    height: 50px; /* 高度 */
    line-height: 50px; /* 行高 */
  }
  
  /* 弹出层中的子菜单项鼠标悬停时的背景颜色 */
  :deep(.el-menu--popup .el-menu-item:hover) {
    background-color: #313e51 !important; /* 悬停时背景颜色 */
  }
  
  /* 折叠模式下的样式 */
  // .el-menu--collapse :deep(.el-sub-menu__title) {
  //   padding-left: 10px !important; /* 折叠时的内边距 */
  // }
  
  .el-menu--collapse :deep(.el-sub-menu .el-menu-item) {
    padding-left: 20px !important; /* 折叠时子菜单项的内边距 */
  }
  /* 确保 <span> 在折叠状态下隐藏 */
    .el-menu--collapse .el-menu-item span,
  .el-menu--collapse .el-submenu__title span {
    display: none;
  }
  
  </style>
  
  